<template>
	<view class="tab_bar">
		<scroll-view scroll-y="true" style="height: 100%;">
			<view v-for="(i,j) in list" :class="active==j?'item active':'item'" :key='i.id'  @click="choseItem(i,j)">
				{{i.name}}
			</view>
		</scroll-view>
	</view>
		
</template>

<script>
	export default {
		props:{
			list:{
				default:[],
				type:Array
			},
			actives:{
				default:0,
				type:Number
			}
		},
		data(){
			return{
				active:0
			}
		},
		watch:{
			actives(news){
				this.active = news;
			}
		},
		methods:{
			choseItem(i,j){
				this.$emit('choseItem',i,j)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab_bar{
		/* #ifdef MP-WEIXIN */
		width: 176rpx;
		height: calc(100vh - 136rpx);
		/* #endif */
		/* #ifdef H5 */
		width: 156rpx;
		height: calc(100vh - 332rpx);
		// height: calc(100vh - var(--window-top) - var(--window-bottom) - 28rpx - 114rpx -12rpx);	
		/* #endif */
		background: #F6F7F8;
		.item{
			width: 100%;
			height: 118rpx;
			line-height: 118rpx;
			text-align: center;
			color: #151616;
			font-size: 28rpx;
			font-weight: 400;
			display: inline-block;
			overflow: hidden;
		}
		.active{
			background: #FFFFFF;
			font-size: 32rpx;
			font-weight: 500;
			position: relative;
			overflow: hidden;
			&::before{
				content: '';
				width: 8rpx;
				height: 30rpx;
				background: #EA3B17;
				position: absolute;
				top: 42rpx;
				left: 4rpx;
			}
			
		}
	}
</style>
